<!DOCTYPE html>
<!--
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://cksource.com/ckfinder/license
-->
<html>
<head>
	<meta charset="utf-8">
	<title>CKFinder 3 Samples</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!--[if lt IE 9]>
	<script src="js/html5shiv.min.js"></script>
	<![endif]-->
	<link href="css/sample.css" rel="stylesheet">
	<link href="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.css" rel="stylesheet">
</head>
<body>
<header class="header-a">
	<div class="grid-container">
		<h1 class="header-a-logo grid-width-30">
			<a href="index.html"><img src="img/logo.png" alt="CKFinder Logo"></a>
		</h1>
		<nav class="navigation-b grid-width-70">
			<ul>
				<li><a href="http://docs.cksource.com/ckfinder3/" class="button-a">Documentation</a></li>
			</ul>
		</nav>
	</div>
</header>
<main class="grid-container">
	<nav class="tree-a tree-a-layout grid-width-30">
		<h1>CKFinder Samples</h1>
		<h2>Website Integration</h2>
		<ul>
			<li><a href="widget.html">Widget</a></li>
			<li><a href="popups.html">Popup</a></li>
			<li><a href="modals.html">Modal</a></li>
			<li><a href="full-page.html">Full Page</a></li>
		</ul>
		<h2 class="tree-a-no-sub tree-a-active"><a href="ckeditor.html">CKEditor Integration</a></h2>
		<h2>Skins</h2>
		<ul>
			<li><a href="skins-moono.html">Moono</a></li>
			<li><a href="skins-jquery-mobile.html">jQuery Mobile</a></li>
		</ul>
		<h2>User Interface</h2>
		<ul>
			<li><a href="user-interface-default.html">Default</a></li>
			<li><a href="user-interface-compact.html">Compact</a></li>
			<li><a href="user-interface-mobile.html">Mobile</a></li>
		</ul>
		<h2 class="tree-a-no-sub"><a href="localization.html">Localization</a></h2>
		<h2>Other</h2>
		<ul>
			<li><a href="other-read-only.html">Read-only Mode</a></li>
			<li><a href="other-custom-configuration.html">Custom Configuration</a></li>
		</ul>
		<h2 class="tree-a-no-sub"><a href="plugin-examples.html">Plugin Examples</a></h2>

	</nav>
	<section class="content grid-width-70">
		<h1>CKEditor Integration</h1>
		<p>To <a href="http://docs.cksource.com/ckfinder3/#!/guide/dev_ckeditor">integrate CKFinder with CKEditor</a>
			all you have to do is pass some additional configuration options to CKEditor:</p>
			<pre class="prettyprint"><code>CKEDITOR.replace( 'editor1', {
	filebrowserBrowseUrl: '/ckfinder/ckfinder.html',
	filebrowserUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files'
} );</code></pre>
		<p>It is also possible to use <code>CKFinder.setupCKEditor()</code> as shown below:</p>
<pre class="prettyprint"><code>var editor = CKEDITOR.replace( 'ckfinder' );
CKFinder.setupCKEditor( editor );</code></pre>
		<p>The sample below presents the result of the integration. You can manage and select files from your server when creating links or embedding images in CKEditor content. In modern browsers you may also try <strong>pasting images from clipboard</strong> directly into the editing area as well as <strong>dropping images</strong> &mdash; the files will be saved on the fly by CKFinder.</p>
		<div id="editor1"></div>
	</section>
</main>
<footer class="footer-a grid-container">
	<div class="grid-container">
		<p class="grid-width-100">
			CKFinder 3 for PHP &ndash; <a href="http://cksource.com/ckfinder">http://cksource.com/ckfinder</a>
		</p>
		<p class="grid-width-100">
			Copyright &copy; 2003-2015, <a class="samples" href="http://cksource.com/">CKSource</a> &ndash; Frederico
			Knabben. <a href="http://cksource.com/ckfinder/license">All rights reserved</a>.
		</p>
	</div>
</footer>
<nav class="navigation-a">
	<div class="grid-container">
		<ul class="navigation-a-left grid-width-70">
			<li><a href="http://cksource.com/ckfinder">Project Homepage</a></li>
			<li class="global-is-mobile-hidden"><a href="https://github.com/ckfinder/ckfinder/issues">I found a bug in CKFinder</a></li>
			<li class="global-is-mobile-hidden"><a class="icon-pos-right icon-navigation-a-github" href="https://github.com/ckfinder/ckfinder-docs-samples">Sample Plugins on GitHub</a></li>
		</ul>
	</div>
</nav>

<script src="js/sf.js"></script>
<script src="js/tree-a.js"></script>
<script src="//cdn.ckeditor.com/4.5.4/standard-all/ckeditor.js"></script>
<script src="../ckfinder.js"></script>
<script>
	// Note: in this sample we use CKEditor with two extra plugins:
	// - uploadimage to support pasting and dragging images,
	// - image2 (instead of image) to provide images with captions.
	// Additionally, the CSS style for the editing area has been slightly modified to provide responsive images during editing.
	// All these modifications are not required by CKFinder, they just provide better user experience.
	if ( typeof CKEDITOR !== 'undefined' ) {
		CKEDITOR.addCss( 'img {max-width:100%; height: auto;}' );
		var editor = CKEDITOR.replace( 'editor1', {
			extraPlugins: 'uploadimage,image2',
			removePlugins: 'image',
			height:350
		} );
		CKFinder.setupCKEditor( editor );
	} else {
		document.getElementById( 'editor1' ).innerHTML = '<div class="tip-a tip-a-alert">This sample requires working Internet connection to load CKEditor from CDN.</div>'
	}
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.js" type="text/javascript"></script>

</body>
</html>
